import { useIsDarkActive } from 'src/boot/app';
import { ref, Ref, watchEffect } from 'vue';

// const getTheme = (dark: boolean) => (dark ? 'ag-theme-alpine-dark' : 'ag-theme-material');
const getTheme = (dark: boolean, dense?: boolean) => {
  if (dense) {
    return dark ? 'ag-theme-balham-dark' : 'ag-theme-balham';
  }
  return dark ? 'ag-theme-alpine-dark' : 'ag-theme-material';
};

export const useTheme = (dark: Ref<boolean | undefined>, dense: Ref<boolean | undefined>) => {
  const isDarkActive = useIsDarkActive();

  const theme = ref('');

  watchEffect(() => {
    theme.value =
      typeof dark.value === 'boolean' ? getTheme(dark.value, dense.value) : getTheme(isDarkActive.value, dense.value);
  });

  return theme;
};
